<template>
  <div class="new-page fra-monitoring padding-0">
    <!-- search -->
    <filterSearch ref="fs-search" :loading="ftmAirlineMonitorInfoLoading" @searchHandler="changeTable" />
    <!-- 时间刻度轴 -->
    <div v-show="!drawerVisible" class="change-zoom-btn">
      <a-icon type="zoom-in" class="zoom-in-btn" @click="timeRangeChangehandler('in')" />
      <span v-show="timeSliderShow">
        <a-popover v-model="timeSliderVisible" placement="leftTop" title="" trigger="click"
          overlay-class-name="slider-popover" :get-popup-container="
            triggerNode => {
              return triggerNode.parentNode || document.body;
            }
          ">
          <template slot="content">
            <timeRange ref="tr" @timeBarRender="timeBarRender" />
          </template>
          <!-- <a-icon type="column-width" class="column-width-btn" @click="timeSliderVisible=true" /> -->
        </a-popover>
      </span>
      <a-icon type="more" class="column-width-btn" @click="
        timeSliderShow = true;
      timeSliderVisible = true;
      " />
      <a-icon type="zoom-out" class="zoom-out-btn" @click="timeRangeChangehandler('out')" />
    </div>
    <!-- 时间进度 -->
    <div v-show="ftmAirlineMonitorInfo.length > 0" class="c-time-box numbers" :style="{ left: currentDateOffset }">
      <div class="time-show-text-box">
        {{ currentDate }}
        <div>{{ currentDate1 }}</div>
      </div>
      <span class="time-show-box" />
      <!-- <span class="v-line-bg" /> -->
    </div>
    <div v-show="ftmAirlineMonitorInfo.length > 0" class="c-time-box2 numbers" :style="{ left: currentDateOffset }">
      <span class="time-show-text-box">{{ currentDate }}</span>
      <!-- <span class="time-show-box" /> -->
      <span class="v-line-bg" />
    </div>

    <!-- table 展示列 -->

    <a-dropdown v-show="!drawerVisible" :visible="checkedTableShow" :trigger="['click']" placement="bottomRight"
      class="table-col-show-change" @visibleChange="handleClickChange">
      <a-icon :component="require('@/assets/icon/Fleet_Status_Filter_Setting.svg')" class="cu-poin ml-16" />
      <div slot="overlay" class="c-dropdown-box sie">
        <div class="c-dropdown-box-title">选择显示的列</div>
        <a-checkbox-group v-model="checkedTabelTmp">
          <a-row class="checked-filter-box">
            <template v-for="item in columns">
              <a-col v-if="!item.unableToDelete" :key="item.dataIndex" class="notice-item-e" :span="24">
                <a-checkbox :value="item.dataIndex" :disabled="
                  checkedTabelTmp.length === 1 &&
                  checkedTabelTmp[0] === item.dataIndex
                ">
                  {{ item.showTitle }}
                </a-checkbox>
              </a-col>
            </template>
          </a-row>
        </a-checkbox-group>
        <div class="d-flex jc-center">
          <a-button class="mr-4" size="small" @click="handleClickChange(false)">取消</a-button>
          <a-button class="ml-4" size="small" type="primary" @click="filterChangeSave">保存</a-button>
        </div>
      </div>
    </a-dropdown>

    <!-- table -->
    <a-table :loading="ftmAirlineMonitorInfoLoading" class="table-box" :style="{ height: outSliderHeight }"
      :class="{ 'table-box-click': drawerVisible }" size="small" :columns="columnSs"
      :data-source="ftmAirlineMonitorInfo" :pagination="{
        showTotal: total => `共 ${total} 条数据`,
        showSizeChanger: true, //设置每页显示数据条数
        showQuickJumper: true,
        size: 'big',
        current: paginationOptions.pageNum,
        pageSize: paginationOptions.pageSize,
        total: paginationOptions.total
      }" :scroll="{ x: sliderWidht, y: sliderHeight }" :custom-row="customRow" :row-key="(row, index) => row.id"
      :row-class-name="faRowClassHandler" @change="changeTable" />

    <!-- table内抽屉 -->
    <itemDetails :drawer-visible.sync="drawerVisible" :current-item="currentItem" :report-handler="reportHandler"
      :row-index="faActiveIndex[0]" />
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import oooiSvg from '@/pages/components/oooi';
import rowClass from '@/pages/common/rowClass';
import filterSearch from '@/pages/components/filterSearch';
import itemDetails from './components/itemDetails';
import reportList from './reportList';

import timeRange from './components/timeRange';
import { priorityList, noPriority } from '@/pages/common/constant.js';
// import taskResearch from './components/taskResearch';
import { debounce } from '@/utils/util';
import Sortable from 'sortablejs';

export default {
  name: 'FraMonitoring',
  components: {
    itemDetails,
    filterSearch,
    timeRange

    // taskResearch
  },
  mixins: [rowClass],
  // i18n: require('./i18n'),
  data() {
    return {
      checkedTableShow: false,
      priorityList,
      search: {},
      leftWidht: 0,
      sliderWidht: '50%',
      sliderHeight: 600,
      outSliderHeight: 600,
      eventDetailsVisible: false,
      itemDetailsCIndex: -1,
      timeSliderShow: false,
      timeSliderVisible: true,
      currentDate: '0:00',
      currentDate1: '0:00',
      currentDateOffset: '500%',
      currentDateOffset2: '500%',
      drawerVisible: false,
      currentItem: {},
      airportInfoVisible: false,
      timeInterval: -1,
      getDataFalg: -1,
      timeBarFlag: -1,
      refresh: -1,
      efReportVisible: false,
      faultReportVisible: false,
      snapshotVisible: false,
      // 展示航班详情后展示的字段
      drawerVisibleTable: [
        'priority',
        'tailnumber',
        'currentFlight',
        'fleet',
        'eta',
        'oooi'
      ],
      // 控制info展示字段
      checkedTabel: [
        'priority',
        'tailnumber',
        'currentFlight',
        'fleet',
        'eta',
        'oooi',
        'model',
        'reportC',
        'arr',
        'dep',
        'overnightAirport'
      ],
      checkedTabelTmp: [],
      tColumns: [],
      showColumns: [],
      handleParams: {},
      columns: [
        {
          title: () => {
            const ht = [];

            for (let i = 0; i < priorityList.length; i++) {
              const item = priorityList[i];
              ht.push(
                <p style='margin-bottom:12px'>
                  <a-icon
                    component={item.icon}
                    style='font-size:28px;vertical-align: middle;'
                  />
                  {item.name}
                </p>
              );
            }
            return [
              <div class='d-flex ai-center'>
                <span class='pr-4'>优先级</span>

                <a-dropdown placement='bottomCenter'>
                  <div slot='overlay' class='model-list-tips-btn-main'>
                    <div>
                      {ht.reverse()}
                      <p style='margin-bottom:6px'>
                        <span style='margin-left:8px'>--</span>
                        <span style='margin-left:6px'> 无</span>
                      </p>
                      <div class='model-list-tips-btn-main-line'></div>
                      <p
                        class='d-flex ai-center'
                        style='margin-bottom:12px;margin-top:6px'
                      >
                        <a-icon
                          component={require('@/assets/icon/Fleet_Status_ETOPS.svg')}
                          style='font-size:20px;vertical-align: middle;margin-left:4px'
                        />
                        <span class='ml-5 mt-3'>Etops</span>
                      </p>

                      <p class='mb-0 d-flex ai-center'>
                        <a-icon
                          component={require('@/assets/icon/Alert_notice.svg')}
                          style='font-size:20px;vertical-align: middle;margin-left:4px'
                        />
                        <span class='ml-5 mt-3'>Alert Notice</span>
                      </p>
                    </div>
                  </div>
                  <a-icon
                    class='pr-4'
                    type='question-circle'
                    class='hover-change-color'
                  />
                </a-dropdown>
              </div>
            ];
          },
          showTitle: '优先级',
          align: 'center',
          sorter: true,
          dataIndex: 'priority',
          width: 136,
          fixed: 'left',
          customCell: () => {
            return {
              style: {
                position: 'relative'
              }
            };
          },
          customRender: (value, record) => {
            const info = this.priorityHandler(value);
            const currentLeg =
              record.flightLegs?.find(
                item => record.totalLeg - item.leg === 0
              ) ??
              record.flightLegs?.[0] ??
              {};
            return [
              <div class='etops-alert-box'>
                {record.etopsFlight && currentLeg.tailnumber ? (
                  <a-icon
                    class='airplane-landing'
                    component={require('@/assets/icon/Fleet_Status_ETOPS.svg')}
                  />
                ) : (
                  ''
                )}
                {record.alertNotPriority >= 0 ? (
                  <a-icon
                    class='alert-landing'
                    class={`notice-alert-${record.alertNotPriority}`}
                    component={require('@/assets/icon/Alert_notice.svg')}
                  />
                ) : (
                  ''
                )}
              </div>,
              info.name ? (
                <a-icon
                  onClick={e => this.goEmPage(e, record.tailnumber)}
                  component={info.icon}
                  style='font-size:28px;vertical-align: middle;'
                />
              ) : (
                '--'
              )
            ];
          }
        },
        {
          title: '机号',
          align: 'left',
          sorter: true,
          showTitle: '机号',
          dataIndex: 'tailnumber',
          fixed: 'left',
          width: 74,
          customRender: (value, record, index) => {
            const currentLeg =
              record.flightLegs?.find(
                item => record.totalLeg - item.leg === 0
              ) ??
              record.flightLegs?.[0] ??
              {};
            // return currentLeg.tailnumber ? <a onClick={(e) => this.reportHandler(e, currentLeg, 'flightLegHistoryVisible', index, true)}>{currentLeg.tailnumber}</a> : value || '--';
            return currentLeg.tailnumber ? (
              <a
                onClick={e =>
                  this.reportHandler(
                    e,
                    currentLeg,
                    'flightLegHistoryVisible',
                    index,
                    true
                  )
                }
              >
                {currentLeg.tailnumber}
              </a>
            ) : (
              (
                <div
                  onClick={e =>
                    this.reportHandler(
                      e,
                      currentLeg,
                      'flightLegHistoryVisible',
                      index,
                      true
                    )
                  }
                >
                  {value}
                </div>
              ) || '--'
            );
          }
        },
        {
          title: '机队',
          showTitle: '机队',
          align: 'left',
          sorter: true,
          dataIndex: 'fleet',
          fixed: 'left',
          width: 74,
          customRender: (value, record) => {
            const hide = !record.flightLegs || record.flightLegs.length === 0;
            return hide ? '--' : value;
          }
        },
        {
          title: '航班号',
          showTitle: '航班号',
          align: 'left',
          sorter: true,
          dataIndex: 'currentFlight',
          fixed: 'left',
          width: 80,
          customRender: (value, record, index) => {
            const currentLeg =
              record.flightLegs?.find(
                item => record.totalLeg - item.leg === 0
              ) ??
              record.flightLegs?.[0] ??
              {};
            return currentLeg.flightNo ? (
              <a
                onClick={e =>
                  this.reportHandler(
                    e,
                    currentLeg,
                    'flightLegDetailsVisible',
                    index,
                    true
                  )
                }
              >
                {currentLeg.flightNo}
              </a>
            ) : (
              '--'
            );
          }
        },
        {
          title: '起飞机场',
          showTitle: '起飞机场',
          align: 'center',
          dataIndex: 'dep',
          fixed: 'left',
          width: 68,
          customRender: (value, record) => {
            const currentLeg =
              record.flightLegs?.find(
                item => record.totalLeg - item.leg === 0
              ) ??
              record.flightLegs?.[0] ??
              {};
            return currentLeg.dep ? (
              <a
                onClick={e => this.airportInfoHandler(e, currentLeg.dep, 'dep')}
              >
                {currentLeg.dep}
              </a>
            ) : (
              '--'
            );
          }
        },
        {
          title: '落地机场',
          showTitle: '落地机场',
          align: 'center',
          width: 68,
          fixed: 'left',
          dataIndex: 'arr',
          customRender: (value, record) => {
            const currentLeg =
              record.flightLegs?.find(
                item => record.totalLeg - item.leg === 0
              ) ??
              record.flightLegs?.[0] ??
              {};
            return currentLeg.arr ? (
              <a
                onClick={e => this.airportInfoHandler(e, currentLeg.arr, 'arr')}
              >
                {currentLeg.arr}
              </a>
            ) : (
              '--'
            );
          }
        },
        {
          title: '过夜/DC',
          showTitle: '过夜/DC',
          align: 'center',
          width: 68,
          fixed: 'left',
          dataIndex: 'overnightAirport',
          customRender: (value, record) => {
            return value ? (
              <a
                onClick={e =>
                  this.airportInfoHandler(e, value, 'overnightAirport')
                }
              >
                {value}
              </a>
            ) : (
              '--'
            );
          }
        },
        {
          title: 'ACARS',
          showTitle: 'ACARS',
          align: 'left',
          sorter: true,
          dataIndex: 'latestAcarsTime',
          fixed: 'left',
          width: 66,
          customRender: (value, record) => {
            const hide = !record.flightLegs || record.flightLegs.length === 0;
            return hide
              ? '--'
              : [
                <div class='fs-16 numbers lh-1 text-color-626573 '>
                  {value ? this.$moment.utc(value).format('HH:mm') : '--'}
                </div>,
                <div class='fs-12 numbers lh-1 text-color-9ea5b2 '>
                  {value ? this.$moment.utc(value).format('MM-DD') : '--'}
                </div>
              ];
          }
        },
        {
          title: 'ETA',
          showTitle: 'ETA',
          align: 'left',
          sorter: true,
          dataIndex: 'eta',
          fixed: 'left',
          width: 52,
          customRender: (value, record) => {
            const hide = !record.flightLegs || record.flightLegs.length === 0;
            return hide
              ? '--'
              : [
                <div class='  fs-16   numbers lh-1 text-color-626573 '>
                  {value ? this.$moment.utc(value).format('HH:mm') : '--'}
                </div>,
                <div class='fs-12 numbers lh-1 text-color-9ea5b2 '>
                  {value ? this.$moment.utc(value).format('MM-DD') : '--'}
                </div>
              ];
          }
        },
        {
          title: 'OOOI',
          showTitle: 'OOOI',
          align: 'center',
          dataIndex: 'oooi',
          fixed: 'left',
          width: 80,
          customRender: (value, record) => {
            let step = 0;
            const currentLeg =
              record.flightLegs?.find(
                item => record.totalLeg - item.leg === 0
              ) ??
              record.flightLegs?.[0] ??
              {};
            const {
              outTime,
              offTime,
              onTime,
              inTime,
              latestAcarsTime
            } = currentLeg;
            let time = '';
            if (inTime) {
              step = 5;
              time = this.$moment.utc(inTime).format('HH:mm');
            } else if (onTime) {
              step = 4;
              time = this.$moment.utc(onTime).format('HH:mm');
            } else if (record.phase === 'ER') {
              step = 3;
              time = latestAcarsTime
                ? this.$moment.utc(latestAcarsTime).format('HH:mm')
                : this.$moment.utc(offTime).format('HH:mm');
            } else if (offTime) {
              step = 2;
              time = this.$moment.utc(offTime).format('HH:mm');
            } else if (outTime) {
              step = 1;
              time = this.$moment.utc(outTime).format('HH:mm');
            }
            return step > 0 ? <oooiSvg step={step} time={time} /> : '--';
          }
        },
        {
          title: () => {
            return [
              <div class='d-flex ai-center'>
                <span class='pr-4'>信息提醒</span>

                <a-dropdown placement='bottomCenter'>
                  <div slot='overlay' class='model-list-tips-btn-main'>
                    <div>
                      <div class='mb-12'>
                        <span
                          class={['msg-msg-box mr-5']}
                          style={{ 'background-color': '#9ea5b2' }}
                        >
                          M
                        </span>
                        <span>Maintenance Messages</span>
                      </div>
                      <div class='mb-12'>
                        <span
                          class={['msg-m-box mr-5']}
                          style={{ 'background-color': '#9ea5b2' }}
                        >
                          M
                        </span>
                        <span>SMT / MMO</span>
                      </div>
                      <div class='mb-12'>
                        <span
                          class={['msg-f-box mr-8']}
                          style={{ 'background-color': '#9ea5b2' }}
                        >
                          <span class='msf-f-text'>N</span>
                        </span>
                        <span>Alert Service</span>
                      </div>
                      <div>
                        <span
                          class='msg-m2-box'
                          style={{ 'background-color': '#9ea5b2' }}
                        >
                          <span class='msf-f-text'>N</span>
                          <span
                            class={['msg-f2-box']}
                            style={{ 'background-color': '#9ea5b2' }}
                          ></span>
                        </span>
                        <span class='ml-6'>Alert System</span>
                      </div>
                    </div>
                  </div>
                  <a-icon
                    class='pr-4'
                    type='question-circle'
                    class='hover-change-color'
                  />
                </a-dropdown>
              </div>
            ];
          },
          showTitle: '信息提醒',
          align: 'left',
          dataIndex: 'model',
          fixed: 'left',
          width: 134,
          customRender: (value, record) => {
            const hide = !record.flightLegs || record.flightLegs.length === 0;
            const b = noPriority.color;
            // const f = this.priorityHandler(record.fdePriority);

            // const n = this.priorityHandler(record.alertPriority);
            const msg = this.priorityHandler(record.mmsgPriority);
            const mmo = this.priorityHandler(record.mmoPriority);
            const ser = this.priorityHandler(record.alertSerPriority);
            const sys = this.priorityHandler(record.alertSysPriority);
            return hide
              ? '--'
              : [
                record.mmsgPriority >= 0 ? (
                  <span
                    class={['cu-pointer msg-msg-box mr-5']}
                    onClick={e => this.goEmPage(e, record.tailnumber)}
                    style={{ 'background-color': msg?.color ?? b }}
                  >
                    M
                  </span>
                ) : (
                  ''
                ),
                record.mmoPriority >= 0 ? (
                  <span
                    class={['cu-pointer msg-m-box mr-5']}
                    onClick={e => this.goEmPage(e, record.tailnumber)}
                    style={{ 'background-color': mmo?.color ?? b }}
                  >
                    M
                  </span>
                ) : (
                  ''
                ),
                record.alertSerPriority >= 0 ? (
                  <span
                    class={['cu-pointer msg-f-box mr-8']}
                    onClick={e => this.goEmPage(e, record.tailnumber)}
                    style={{ 'background-color': ser?.color ?? b }}
                  >
                    <span class='msf-f-text'>N</span>
                  </span>
                ) : (
                  ''
                ),
                record.alertSysPriority >= 0 ? (
                  <span
                    class='cu-pointer msg-m2-box'
                    onClick={e => this.goEmPage(e, record.tailnumber)}
                    style={{ 'background-color': sys?.color ?? b }}
                  >
                    <span class='cu-pointer msf-f-text'>N</span>
                    <span
                      class={['msg-f2-box']}
                      style={{ 'background-color': sys?.color ?? b }}
                    ></span>
                  </span>
                ) : (
                  ''
                )
              ];
          }
        },

        {
          title: '报告',
          showTitle: '报告',
          align: 'left',
          dataIndex: 'reportC',
          fixed: 'left',
          width: 126,
          customCell: () => {
            return {
              style: {
                position: 'relative'
              }
            };
          },
          customRender: (value, record, index) => {
            const hide = !record.flightLegs || record.flightLegs.length === 0;
            return hide
              ? '--'
              : [
                <reportList
                  record={record}
                  index={index}
                  reportHandler={this.reportHandler}
                />
              ];
          }
        }
      ]
    };
  },
  computed: {
    ...mapState('setting', ['pageMinHeight', 'fleetStatusClickEvent']),
    ...mapState('fraMonitoring', [
      'ftmAirlineMonitorInfoLoading',
      'paginationOptions',
      'ftmAirlineMonitorInfo',
      'faActiveIndex'
    ]),
    ...mapState('eventCodeMaintenance', ['standScoreList']),
    columnSs() {
      return [...this.showColumns, ...this.tColumns];
    }
  },
  watch: {
    drawerVisible: {
      handler(nv) {
        if (!nv) {
          this.setState({ key: 'faActiveIndex', payload: [-1] });
          // this.columns.splice(6, 0, ...[

          // ]);
        } else {
          // this.columns.splice(6, 2);
        }
      },
      immediate: true
    },
    checkedTabel: {
      handler(nv) {
        this.leftWidht = this.columns.reduce((a, b) => {
          let bw = 0;
          if (b.unableToDelete || this.checkedTabelTmp.includes(b.dataIndex)) {
            bw = b.width;
          }
          return a + bw;
        }, 0);
        // document.querySelector('.table-box .ant-table-fixed-left .ant-table-fixed').style.width = `${this.leftWidht}px`;
        const newColumns = [];
        this.columns.forEach((item, index) => {
          if (item.unableToDelete || nv.includes(item.dataIndex)) {
            newColumns.push(item);
          }
        });
        this.showColumns = [...newColumns];
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.drawerVisible = false;
    this.checkedTabelTmp = JSON.parse(
      localStorage.getItem('fmTableS') ?? JSON.stringify([...this.checkedTabel])
    );
    this.leftWidht = this.columns.reduce((a, b) => {
      let bw = 0;
      if (b.unableToDelete || this.checkedTabel.includes(b.dataIndex)) {
        bw = b.width;
      }
      return a + bw;
    }, 0);
    this.$nextTick(() => {
      setTimeout(() => {
        document
          .querySelector('.ant-table-header .ant-table-fixed')
          .appendChild(document.querySelector('.c-time-box'));
        document
          .querySelector('.ant-table-body .ant-table-fixed')
          .appendChild(document.querySelector('.c-time-box2'));
        document
          .querySelector('.ant-table-fixed-left .ant-table-thead')
          .appendChild(document.querySelector('.table-col-show-change'));

        this.columnDrop();
      }, 0);
    });
    this.changeTable({ current: 1 });
    this.getDataInfo();
    // 浏览器tab激活 重新渲染
    document.addEventListener('visibilitychange', this.visibilitychange);
    // resize窗口重新渲染
    window.addEventListener('resize', this.debounceRender);
  },
  beforeDestroy() {
    this.drawerVisible = false;
  },
  activated() {
    // if (this.$route.params?.m) {
    //   this.setState({ key: this.$route.params?.m, payload: true });
    // }
    // this.timeBarRender();
    // const modalList =
    //     localStorage.getItem('showModal')
    //       ? JSON.parse(localStorage.getItem('showModal')) : [];
    // for (const showFlag of modalList) {
    //   this.setState({ key: showFlag, payload: true });
    // }

    this.timedRefresh(true);
    this.getDataInfo();
    // 浏览器tab激活 重新渲染
    document.addEventListener('visibilitychange', this.visibilitychange);
    // resize窗口重新渲染
    window.addEventListener('resize', this.debounceRender);
    this.debounceRender();
    // this.$nextTick(() => {
    //   setTimeout(() => {
    //     document.querySelector('.c-time-box2').style.minHeight = `${this.sliderHeight}`;
    //     document.querySelector('.ant-table-body').style.minHeight = `${this.sliderHeight}`;
    //   }, 0);
    // });
  },
  deactivated() {
    clearTimeout(this.refresh);
    clearTimeout(this.getDataFalg);
    clearTimeout(this.timeBarFlag);
    document.removeEventListener('visibilitychange', this.visibilitychange);
    window.removeEventListener('resize', this.debounceRender);
  },
  methods: {
    ...mapMutations('fraMonitoring', ['setState']),
    ...mapActions('fraMonitoring', ['getFtmAirlineMonitorInfo']),

    debounceRender: debounce(function () {
      this.timeBarRender();
    }, 500),
    visibilitychange() {
      if (!document.hidden) {
        this.timeBarRender();
      }
    },
    // 保存选择的筛选条件
    filterChangeSave() {
      this.checkedTableShow = false;
      this.checkedTabel = [...this.checkedTabelTmp];
      localStorage.setItem(
        'fmTableS',
        JSON.stringify([...this.checkedTabelTmp])
      );
      this.$nextTick(() => {
        this.timeBarRender();
      });
    },
    // 筛选弹框
    handleClickChange(visible) {
      if (visible) {
        this.checkedTabelTmp = [...this.checkedTabel];
      }
      this.checkedTableShow = visible;
    },
    // 列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.ant-table-fixed-left tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.showColumns[evt.oldIndex];
          this.showColumns.splice(evt.oldIndex, 1);
          this.showColumns.splice(evt.newIndex, 0, oldItem);
        }
      });
    },
    // 点击行
    customRow(record, index) {
      return {
        on: {
          click: (event, e) => {
            this.rowClickHanlder(index, record);
          }
        }
      };
    },
    rowClickHanlder(index, record) {
      if (!this.fleetStatusClickEvent) return;
      if (window.$httpRequestList.length > 0) {
        window.$httpRequestList.forEach(item => {
          item('interrupt'); // 给个标志，中断请求
        });
        this.setState({ key: 'getEventDetailData', payload: [] });
        window.$httpRequestList = [];
      }
      if (this.faActiveIndex[0] === index) {
        this.drawerVisible = false;
        const aidx = [...this.faActiveIndex];
        aidx[0] = -1;
        this.setState({ key: 'faActiveIndex', payload: aidx });
        this.checkedTabel = [...this.checkedTabelTmp];
        document.querySelector(
          '.fra-monitoring  .ant-table-fixed-left .ant-table-body-inner'
        ).style.marginRight = '-20px';
        localStorage.removeItem('faCItem');
      } else {
        this.drawerVisible = true;
        this.setState({ key: 'faActiveIndex', payload: [index] });
        this.checkedTabel = [...this.drawerVisibleTable];
        this.currentItem = {
          ...record,
          serialNumber: this.ftmAirlineMonitorInfo[index].serialNumber,
          totalLeg: this.ftmAirlineMonitorInfo[index].totalLeg ?? 0
        };
        localStorage.setItem('faCItem', JSON.stringify(this.currentItem));
        document.querySelector(
          '.fra-monitoring  .ant-table-fixed-left .ant-table-body-inner'
        ).style.marginRight = '0px';
      }
    },
    // // 事件详情
    // eventDetailsHandler(){
    //   this.eventDetailsVisible = true
    //   this.currentItem = { ...record };
    // },
    // 关闭飞机详情
    closeReportHandler(flag) {
      this.setState({ key: flag, payload: false });
    },
    // 把所有抽屉重置
    closeAllDrawersPopUp() {
      this.setState({ key: 'flightLegDetailsVisible', payload: false });
      this.setState({ key: 'flightLegHistoryVisible', payload: false });
      this.setState({ key: 'efReportVisible', payload: false });
      this.setState({ key: 'faultReportVisible', payload: false });
      this.setState({ key: 'snapshotVisible', payload: false });
      this.setState({ key: 'messageUploadVisible', payload: false });
    },
    // 机场信息
    airportInfoHandler(e, code) {
      e.stopPropagation();
      this.setState({ key: 'airportInfoVisible', payload: true });
      localStorage.setItem('apInfoCode', code);
    },
    reportHandler(e, record, flag, index, select = false) {
      // eslint-disable-next-line no-debugger
      // if (index && select) {
      //   this.setState({ key: 'faActiveIndex', payload: [this.faActiveIndex[0], index] });
      // }
      e.stopPropagation();
      if (this.$store.state.setting.openType !== '_blank') {
        this.closeAllDrawersPopUp();
      }

      const currentRow = {
        ...record,
        serialNumber: this.ftmAirlineMonitorInfo[index]?.serialNumber ?? 0,
        totalLeg: this.ftmAirlineMonitorInfo[index].totalLeg ?? 0,
        airline: this.ftmAirlineMonitorInfo[index].airline ?? ''
      };
      if (flag === 'eventDetailsVisible') {
        localStorage.setItem('eRow', JSON.stringify(currentRow));
      } else {
        localStorage.setItem('row', JSON.stringify(currentRow));
      }

      if (flag === 'taskResearchVisible') {
        localStorage.setItem('trRow', JSON.stringify({ ...record }));
        if (this.$store.state.setting.openType === '_self') {
          this.$router.push({ path: 'taskResearch', query: { m: '1' } });
        } else {
          const uuid = new Date().getTime();
          const routeData = this.$router.resolve({
            path: 'taskResearch',
            query: { m: '1', uuid }
          });
          window.open(routeData.href, this.$store.state.setting.openType);
        }
      }
      this.setState({ key: flag, payload: true });
    },
    // 点击航段条
    // legAlerInfoHandler(e, legInfo, index) {
    //   e.stopPropagation();
    //   const scRow = {
    //     ...legInfo,
    //     totalLeg: this.ftmAirlineMonitorInfo[index].totalLeg ?? 0
    //   };
    //   localStorage.setItem('scRow', JSON.stringify(scRow));
    //   this.setState({ key: 'legInfoVisible', payload: true });
    // },
    // 定时60刷新数据
    getDataInfo() {
      clearTimeout(this.getDataFalg);
      this.getDataFalg = setTimeout(async () => {
        await this.getFtmAirlineMonitorInfo({
          ...this.handleParams,
          isAuto: 1
        });
        this.timedRefresh(true);
        this.getDataInfo();
      }, 60000);
    },
    // 每分钟开始刷新两次
    timedRefresh(flag = false) {
      clearTimeout(this.refresh);

      if (
        +this.$moment(new Date()).format('ss') < 7 ||
        this.refresh === -1 ||
        flag
      ) {
        this.timeBarRender();
      }

      this.refresh = setTimeout(() => {
        this.timedRefresh();
      }, 3000);
    },
    // 获取数据
    async changeTable({ current, pageSize = 40 }, filters, sorter) {
      if (pageSize !== this.paginationOptions.pageSize) {
        current = 1;
      }
      const params = { ...this.$refs['fs-search'].search };
      for (const key in params) {
        if (Object.hasOwnProperty.call(params, key)) {
          const element = params[key];
          if (element && element.length === 0) {
            delete params[key];
          }
        }
      }
      switch (sorter?.field) {
        case 'priority':
          params['isPriorityOrder'] =
            sorter.order === 'ascend' ? 0 : sorter.order === 'descend' ? 1 : -1;
          break;
        case 'tailnumber':
          params['isTailNumberOrder'] =
            sorter.order === 'ascend' ? 0 : sorter.order === 'descend' ? 1 : -1;
          break;
        case 'fleet':
          params['isFleetOrder'] =
            sorter.order === 'ascend' ? 0 : sorter.order === 'descend' ? 1 : -1;
          break;
        case 'currentFlight':
          params['isFlightNoOrder'] =
            sorter.order === 'ascend' ? 0 : sorter.order === 'descend' ? 1 : -1;
          break;
        case 'latestAcarsTime':
          params['isAcarsOrder'] =
            sorter.order === 'ascend' ? 0 : sorter.order === 'descend' ? 1 : -1;
          break;
        case 'eta':
          params['isEtaOrder'] =
            sorter.order === 'ascend' ? 0 : sorter.order === 'descend' ? 1 : -1;
          break;
      }
      this.rowClickHanlder(this.faActiveIndex[0]);

      this.closeAllDrawersPopUp();

      this.setState({
        key: 'paginationOptions',
        payload: { ...this.paginationOptions, pageNum: current, pageSize }
      });
      this.handleParams = params;
      await this.getFtmAirlineMonitorInfo(params);
      this.timedRefresh(true);
      // this.timeBarRender();
    },
    // 换航
    changeTheDestination(item) {
      item['isAlternate'] = 0;
      const aIds = JSON.parse(sessionStorage.getItem('notAlternate') ?? '[]');
      sessionStorage.setItem(
        'notAlternate',
        JSON.stringify([...aIds, item.id])
      );
    },
    goEmPage(e, tailnumber) {
      e.stopPropagation();

      const routeData = this.$router.resolve({
        path: '/eventMonitoring',
        query: {
          tailnumber,
          oi: 1
        }
      });

      window.open(routeData.href, '_blank');
    },
    // getData(params = {}) {
    //   const apiParams = { ...params };
    //   for (const key in apiParams) {
    //     if (Object.hasOwnProperty.call(apiParams, key)) {
    //       const element = apiParams[key];
    //       if (element.length === 0) {
    //         delete apiParams[key];
    //       }
    //     }
    //   }
    //   this.search = apiParams;
    //   this.changeTable({ current: 1 }, {}, {}, {}, apiParams);
    // },

    /**
     * ========================================================
     * ************   以下为时间轴和航段条逻辑   ************
     * ========================================================
     */

    // 时间数据偏移
    currentDateOffsetHandler(
      verticalLineIndex,
      timeBoxWidth,
      cw,
      ocw,
      stepRange,
      si,
      loop = false
    ) {
      clearTimeout(this.timeBarFlag);
      this.changeOffset(verticalLineIndex, timeBoxWidth, cw, stepRange);
      this.sliderOffsetHandler(timeBoxWidth, ocw, stepRange, si);
      this.timeBarFlag = setTimeout(() => {
        this.currentDateOffsetHandler(
          verticalLineIndex,
          timeBoxWidth,
          cw,
          ocw,
          stepRange,
          si,
          true
        );
      }, 1000);
    },

    // 时间数线的偏移
    changeOffset(verticalLineIndex, timeBoxWidth, cw, stepRange) {
      const dis = +this.$moment.utc(new Date()).format('mm') / 60;
      const cw2 = 8 / cw;
      const verticalLine =
        ((((verticalLineIndex + dis) * timeBoxWidth) / cw) * 100) / stepRange;
      const verticalLine2 =
        ((((verticalLineIndex + dis) * timeBoxWidth) / cw) * 100) / stepRange;
      this.currentDateOffset = `calc(${verticalLine}% + ${this.leftWidht +
        5}px)`;
      this.currentDateOffset2 = `calc(${verticalLine2 - cw2}% + ${this
        .leftWidht +
        5 -
        8}px)`;
      this.currentDate = this.$moment.utc(new Date()).format('HH:mm');
      this.currentDate1 = this.$moment
        .utc(new Date())
        .utcOffset(8)
        .format('HH:mm');
    },
    // table时间格的偏移
    sliderOffsetHandler(timeBoxWidth, ocw, stepRange, si) {
      const dis = +this.$moment.utc(new Date()).format('mm') / 60;
      document.querySelector('.fra-monitoring .ant-table-fixed')
        ? (document.querySelector(
          '.fra-monitoring .ant-table-fixed'
        ).style.left = `-${((timeBoxWidth / ocw) * 100 * (si + dis)) /
        stepRange}%`)
        : '';

      document.querySelector(
        '.fra-monitoring .ant-table-scroll .ant-table-body .ant-table-fixed'
      )
        ? (document.querySelector(
          '.fra-monitoring .ant-table-scroll .ant-table-body .ant-table-fixed'
        ).style.left = `-${((timeBoxWidth / (ocw - 8)) * 100 * (si + dis)) /
        stepRange}%`)
        : '';
    },
    // 放大缩小
    timeRangeChangehandler(flag) {
      const defT = this.$refs.tr.defT;
      const pureTime = this.$refs.tr.pureTime;
      const si = Object.keys(pureTime).findIndex(item => +item === +defT[0]);
      const ei =
        defT[1] === 150
          ? Object.values(pureTime).length
          : Object.keys(pureTime).findIndex(item => +item === +defT[1]);
      // 当前时间在所有时间点中index 序号
      const verticalLineIndex = Object.values(pureTime).findIndex(
        item =>
          item === `${this.$moment.utc(new Date()).format('YYYY-MM-DD HH')}:00`
      );
      let newIndexS = Math.max(0, si - 4);
      let newIndexE = Math.min(Object.values(pureTime).length - 1, ei + 4);
      if (flag === 'in') {
        newIndexS = Math.min(verticalLineIndex - 2, si + 4);
        newIndexE = Math.max(verticalLineIndex + 2, ei - 4);
      }
      this.$refs.tr.changeSliderHandler([
        +Object.keys(pureTime)[newIndexS],
        +Object.keys(pureTime)[newIndexE]
      ]);
    },
    // 时间范围刻度尺
    timeBarRender() {
      clearTimeout(this.timeBarFlag);
      setTimeout(() => {
        const pureTime = this.$refs.tr.pureTime;
        const defT = this.$refs.tr.defT;
        // 选中开始时间在所有时间中的序号index
        const si = Object.keys(pureTime).findIndex(item => +item === +defT[0]);
        // 选中结束时间在所有时间中的序号index
        const ei =
          defT[1] === 150
            ? Object.values(pureTime).length
            : Object.keys(pureTime).findIndex(item => +item === +defT[1]);
        // 选中时间相差点数
        const selectedI = ei - si;
        // 总时间开始时间
        const start = Object.values(pureTime)[0];
        // 总时间结束时间
        const end = Object.values(pureTime)[Object.values(pureTime).length - 1];
        // 总小时差，理论点的差
        const mdh = this.$moment.utc(end).diff(this.$moment.utc(start), 'hour');

        // 天数差 默认为3
        const mdd = 3;
        // 每天各有多少时间点
        const dotList = [];
        if (mdd === 3) {
          dotList[1] = 23;
          dotList[2] = 23;
          dotList[0] = this.$moment
            .utc(start)
            .set({ hour: 23, minute: 0, second: 0 })
            .diff(this.$moment.utc(start), 'hour');
          dotList[3] = this.$moment
            .utc(end)
            .diff(
              this.$moment.utc(end).set({ hour: 0, minute: 0, second: 0 }),
              'hour'
            );
        } else if (mdd === 2) {
          dotList[1] = 23;
          dotList[0] = this.$moment
            .utc(start)
            .set({ hour: 23, minute: 0, second: 0 })
            .diff(this.$moment.utc(start), 'hour');
          dotList[2] = this.$moment
            .utc(end)
            .diff(
              this.$moment.utc(end).set({ hour: 0, minute: 0, second: 0 }),
              'hour'
            );
        } else if (mdd === 1) {
          dotList[0] = this.$moment
            .utc(start)
            .set({ hour: 23, minute: 0, second: 0 })
            .diff(this.$moment.utc(start), 'hour');
          dotList[1] = this.$moment
            .utc(end)
            .diff(
              this.$moment.utc(end).set({ hour: 0, minute: 0, second: 0 }),
              'hour'
            );
        } else {
          dotList[0] = mdh;
        }
        // 每格占多少小时
        let stepRange = 1;
        if (selectedI > 64) {
          stepRange = 5;
        } else if (selectedI > 48) {
          stepRange = 4;
        } else if (selectedI > 32) {
          stepRange = 3;
        } else if (selectedI > 16) {
          stepRange = 2;
        }

        if (document.body.clientWidth < 1400) {
          stepRange += 4;
          if (mdh > 36) {
            stepRange += 2;
          }
        } else if (document.body.clientWidth < 1600) {
          stepRange += 2;
          if (mdh > 36) {
            stepRange += 1;
          }
        }
        // 当前时间在所有时间点中index 序号
        const verticalLineIndex = Object.values(pureTime).findIndex(
          item =>
            item ===
            `${this.$moment.utc(new Date()).format('YYYY-MM-DD HH')}:00`
        );
        // 外部宽度 默认1788
        const ocw =
          document.querySelector('.fra-monitoring .ant-table-body')
            ?.clientWidth ?? 1788;
        // 外部高度 默认600
        const och =
          document.querySelector('.fra-monitoring')?.clientHeight ?? 600;
        // 内部可滚动宽度
        const cw = `${(mdh / selectedI) * ocw -
          (mdh / selectedI - 1) * this.leftWidht}`;

        this.sliderWidht = `${cw}px`;
        this.sliderHeight = `${och - 72.5 - 60.6}px`;

        this.outSliderHeight = `${och - 60.6}px`;

        // 页面一共多少个时间点 / 第一格占比 colspan
        let showDotNum = Math.floor(mdh / stepRange + 1);
        showDotNum === mdh / stepRange ? (showDotNum -= 1) : '';

        // 时间格宽度 右侧展示和还未展示的时间区域宽度
        const rightBoxWidth = cw - this.leftWidht;
        // 每一个时间块区域的宽度
        const timeBoxWidth = rightBoxWidth / showDotNum;
        const tsdTmpAll = [];
        // 总宽度(分钟)
        const allminute = showDotNum * stepRange * 60;
        // 循环添加时间轴
        for (let i = 0; i <= mdd; i++) {
          tsdTmpAll.push({
            title: () => {
              return (
                <span>{this.$moment.utc(new Date()).format('MM-DD')}</span>
              );
            },
            dataIndex: 't123' + i,
            customHeaderCell: () => {
              return {
                style: {
                  position: 'relative'
                }
              };
            },
            children: []
          });
          tsdTmpAll[i].dataIndex += i;
          tsdTmpAll[i].title = () => {
            return (
              <span>
                {this.$moment
                  .utc(start)
                  .add(i, 'day')
                  .format('MM-DD')}
              </span>
            );
          };

          // 某一天的时间点

          for (let j = 0; j <= dotList[i]; j++) {
            // 当前距离开始时间是第几个点
            let diffD = i + j;
            for (let k = 0; k < i; k++) {
              diffD += dotList[k];
            }
            // 根据每一格时间跨度渲染
            if (diffD % stepRange === 0) {
              const ti = this.$moment
                .utc(start)
                .add(diffD, 'hour')
                .format('HH:mm');

              const ti1 = this.$moment
                .utc(start)
                .add(diffD, 'hour')
                .utcOffset(8)
                .format('HH:mm');

              // todo  时间修改
              tsdTmpAll[i]['children'].push({
                title: () => {
                  return (
                    <div>
                      <div>UTC:{ti}</div>
                      <div>BJ:{ti1}</div>
                    </div>
                  );
                },
                dataIndex: i + 't' + diffD,
                align: 'left',
                customCell: () => {
                  return {
                    class: 'slider-box',
                    style: {
                      position: 'relative'
                    }
                  };
                },
                customRender: (value, row, index) => {
                  const obj = {
                    children: 1,
                    attrs: {
                      colSpan: 0
                    }
                  };
                  const allLegs = [...(row.flightLegs ?? [])];
                  if (row.nextFlightLegs) {
                    allLegs.push(...row.nextFlightLegs);
                  }
                  // 第一天占据所有格
                  if (i === 0 && diffD === 0) {
                    obj.attrs['colSpan'] = showDotNum;
                    obj['children'] = [];
                    // s和e可以是时间
                    let currentLeg = {};
                    for (const iterator of allLegs) {
                      if (iterator.outTime) {
                        let et =
                          iterator.inTime ||
                          iterator.eta ||
                          iterator.offTime ||
                          row.eta ||
                          this.$moment
                            .utc(new Date())
                            .add(30, 'minute')
                            .format('YYYY-MM-DD HH:mm:ss');
                        // 如果是当前航段则不需要iterator.offTime
                        row.totalLeg - iterator.leg === 0
                          ? (et =
                            iterator.inTime ||
                            iterator.eta ||
                            row.eta ||
                            this.$moment
                              .utc(new Date())
                              .add(30, 'minute')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          : '';

                        const s = this.$moment
                          .utc(iterator.outTime)
                          .diff(this.$moment.utc(start), 'minute');
                        const e = this.$moment
                          .utc(et)
                          .diff(this.$moment.utc(start), 'minute');

                        // 剩余秒数转化分钟
                        const ss =
                          Math.abs(
                            this.$moment.utc(iterator.outTime).format('ss') -
                            this.$moment.utc(start).format('ss')
                          ) / 60;
                        const es =
                          Math.abs(
                            this.$moment.utc(et).format('ss') -
                            this.$moment.utc(start).format('ss')
                          ) / 60;

                        // 开始时间占比，航段跳的起始位置
                        const sDate = ((s + ss) / allminute) * 100;
                        // 航段条宽度
                        const eWidth = ((e + es - (s + ss)) / allminute) * 100;
                        // 航段宽度
                        const eWpx = (eWidth / 100) * rightBoxWidth;
                        // 判断该航段是否包含当前时间而亮起
                        let rangeClass = 'c1';
                        let legEndClass = '';
                        if (
                          this.$moment.utc(new Date()) >=
                          this.$moment.utc(iterator.outTime) &&
                          this.$moment.utc(new Date()) <= this.$moment.utc(et)
                          // &&!iterator.etopsFlight
                        ) {
                          currentLeg = { ...iterator, et };
                          // 当前
                          rangeClass = 'cn';
                        } else if (
                          this.$moment.utc(iterator.outTime) >=
                          this.$moment.utc(new Date())
                        ) {
                          // 未来航段
                          rangeClass = 'c4';

                          if (
                            this.$moment.utc(iterator.outTime) <
                            this.$moment.utc(currentLeg.et)
                          ) {
                            rangeClass = 'c4-hide';
                          }
                        }
                        // 换航
                        if (iterator.isAlternate) {
                          if (
                            !JSON.parse(
                              sessionStorage.getItem('notAlternate') ?? '[]'
                            ).includes(iterator.id)
                          ) {
                            rangeClass = 'c5';
                          }
                        }

                        // if (eventsList) {
                        //   const eventSort = [...eventsList].sort((a, b) => b.priority - a.priority);

                        //   const esClassFlag = eventSort[0]?.priority ?? -1;
                        //   if (esClassFlag === -1) {
                        //     rangeClass = 'cn';
                        //   } else if (esClassFlag === 0) {
                        //     rangeClass = 'c0';
                        //   } else if (esClassFlag === 1) {
                        //     rangeClass = 'c1';
                        //   } else if (esClassFlag === 2) {
                        //     rangeClass = 'c2';
                        //   } else if (esClassFlag === 3) {
                        //     rangeClass = 'c3';
                        //   }
                        // }

                        // const sliderW = document.querySelector('.slider-box').clientWidth * eWidth / 100;
                        // const dotOffsetW = 6 / sliderW * 100;

                        // 当前航段event点
                        const eventArr = [];
                        const eventArrO = [];

                        const wArr = [];
                        const eventsList = [...(iterator?.events ?? [])].sort(
                          (a, b) =>
                            new Date(a.msgTime).getTime() -
                            new Date(b.msgTime).getTime()
                        );
                        for (let ei = 0; ei < (eventsList?.length ?? 0); ei++) {
                          const element = eventsList[ei];
                          const eItemL = this.$moment
                            .utc(element.msgTime)
                            .diff(this.$moment.utc(iterator.outTime), 'minute');
                          const eItemLs =
                            this.$moment.utc(element.msgTime).format('ss') / 60;
                          const eItemDate =
                            ((eItemL + eItemLs) / (e + es - (s + ss))) * 100;
                          wArr.push(eItemDate);
                        }
                        for (
                          let edI = 0;
                          edI < (eventsList?.length ?? 0);
                          edI++
                        ) {
                          const w1 = wArr[edI];
                          const w2 = wArr[edI - 1] ?? -1;
                          const w3 = wArr[edI + 1] ?? 101;
                          let eW = 0;
                          let eL = 0;
                          let miw = '6px';
                          let lrFlag = 'n';
                          if (w1 > 0 && w1 < 100 && w2 <= 0) {
                            eW = w1;
                            eL = 0;
                            miw = '1px';
                            lrFlag = 'l';
                          } else if (
                            w1 > 0 &&
                            w1 <= 100 &&
                            w2 > 0 &&
                            w2 < 100
                          ) {
                            eW = w1 - w2;
                            eL = w2;
                            miw = '6px';
                          } else if (w1 >= 100 && w2 < 100 && w2 > 0) {
                            eW = 100 - w2;
                            eL = w2;
                            lrFlag = 'r';
                          } else if (w1 >= 100 && w2 < 0) {
                            eW = 100;
                            eL = 0;
                            lrFlag = '0';
                            miw = '0px';
                            // if (wArr.length === 1) {
                            //   miw = '0px';
                            // }
                          } else if (w1 < 0 && w3 >= 100) {
                            eW = 100;
                            eL = 0;
                            lrFlag = '0';
                            miw = '0px';
                            miw = '1px';
                          } else if (
                            (eventsList?.length ?? 0) === 1 &&
                            (w1 >= 100 || w1 <= 0)
                          ) {
                            eW = 100;
                            eL = 0;
                            lrFlag = '0';
                            miw = '1px';
                          }

                          // 补充右边部分
                          if (
                            w1 > 0 &&
                            w1 <= 100 &&
                            typeof wArr[edI + 1] === 'undefined'
                          ) {
                            eventArr.push(
                              <a-tooltip
                                overlayClassName='leg-slider-item-out-box'
                                autoAdjustOverflow={false}
                                placement='bottomLeft'
                                overlayStyle={{ 'z-index': '8!important' }}
                              >
                                {rangeClass === 'c5' ? (
                                  <div slot='title'>
                                    <span
                                      class={[
                                        `fs-12 leg-event-box leg-event-box-${rangeClass}`
                                      ]}
                                    >
                                      <div>
                                        {' '}
                                        <a-icon
                                          type='info-circle'
                                          theme='filled'
                                          style={{
                                            color: '#3377ff',
                                            fontSize: '24px'
                                          }}
                                        />
                                      </div>
                                      <div class='text-c fs-16 fw-500 mb-12'>
                                        航班目的地已变更
                                      </div>
                                      <a-button
                                        type='primary'
                                        ghost
                                        onClick={() => {
                                          this.changeTheDestination(iterator);
                                        }}
                                      >
                                        知道了
                                      </a-button>
                                    </span>
                                  </div>
                                ) : (
                                  <div slot='title'>
                                    <span
                                      class={[
                                        `fs-12 leg-event-box leg-event-box-${rangeClass}`
                                      ]}
                                    >
                                      <div class='leg-event-box-fn'>
                                        {iterator.flightNo}
                                      </div>
                                      <a
                                        onClick={e =>
                                          this.airportInfoHandler(
                                            e,
                                            iterator.depCode3,
                                            'dep'
                                          )
                                        }
                                      >
                                        {iterator.depCode3}
                                      </a>
                                      <span class='leg-event-box-dot'>
                                        ·········
                                      </span>
                                      <a
                                        onClick={e =>
                                          this.airportInfoHandler(
                                            e,
                                            iterator.arrCode3,
                                            'arr'
                                          )
                                        }
                                      >
                                        {iterator.arrCode3}
                                      </a>
                                    </span>
                                  </div>
                                )}
                                <span
                                  // onClick={(e) => this.legAlerInfoHandler(e, iterator, index)}

                                  class={[`edt-width-box edt-w-box-r`]}
                                  style={{
                                    left: `${w1}%`,
                                    width: `calc(${100 - w1}% - 6px)`
                                  }}
                                ></span>
                              </a-tooltip>
                            );
                          }

                          // 保证相同时间内有多个点可以展示
                          const eMsgTime = eventsList[edI].msgTime;
                          const onajiData = [];
                          const eItem = eventsList[edI];
                          let cp = eItem.priority;
                          for (const eMsgTimeItem of eventsList) {
                            if (eMsgTimeItem.msgTime === eMsgTime) {
                              cp = Math.max(cp, eMsgTimeItem.priority);
                              onajiData.push(
                                <div>
                                  <span class='mr-12'>{eMsgTimeItem.name}</span>
                                  <span class='mr-12'>{eMsgTimeItem.code}</span>
                                  {eMsgTimeItem.description}
                                </div>
                              );
                            }
                          }

                          // const { inTime, fleet, eta, outTime, flightNo, depCode3, arrCode3, etopsFlight, latestAcarsTime } = iterator;
                          const priority = this.priorityHandler(cp);
                          // 每一分段的宽度
                          const pieceW = (eW / 100) * eWpx;

                          if (eWpx - (w1 / 100) * eWpx < 4) {
                            legEndClass = 'leg-end';
                          }
                          if (eW > 0 && (pieceW >= 4 || eL === 0)) {
                            eventArr.push(
                              <a-tooltip
                                overlayClassName='leg-slider-item-out-box'
                                autoAdjustOverflow={false}
                                placement='bottomLeft'
                                overlayStyle={{ 'z-index': '8!important' }}
                              >
                                {rangeClass === 'c5' ? (
                                  <div slot='title'>
                                    <span
                                      class={[
                                        `fs-12 leg-event-box leg-event-box-${rangeClass}`
                                      ]}
                                    >
                                      <div>
                                        {' '}
                                        <a-icon
                                          type='info-circle'
                                          theme='filled'
                                          style={{
                                            color: '#3377ff',
                                            fontSize: '24px'
                                          }}
                                        />
                                      </div>
                                      <div class='text-c fs-16 fw-500 mb-12'>
                                        航班目的地已变更
                                      </div>
                                      <a-button
                                        type='primary'
                                        ghost
                                        onClick={() => {
                                          this.changeTheDestination(iterator);
                                        }}
                                      >
                                        知道了
                                      </a-button>
                                    </span>
                                  </div>
                                ) : (
                                  <div slot='title'>
                                    <span
                                      class={[
                                        `fs-12 leg-event-box leg-event-box-${rangeClass}`
                                      ]}
                                    >
                                      <div class='leg-event-box-fn'>
                                        {iterator.flightNo}
                                      </div>
                                      <a
                                        onClick={e =>
                                          this.airportInfoHandler(
                                            e,
                                            iterator.depCode3,
                                            'dep'
                                          )
                                        }
                                      >
                                        {iterator.depCode3}
                                      </a>
                                      <span class='leg-event-box-dot'>
                                        ·········
                                      </span>
                                      <a
                                        onClick={e =>
                                          this.airportInfoHandler(
                                            e,
                                            iterator.arrCode3,
                                            'arr'
                                          )
                                        }
                                      >
                                        {iterator.arrCode3}
                                      </a>
                                    </span>
                                  </div>
                                )}
                                <span
                                  // onClick={(e) => this.legAlerInfoHandler(e, iterator, index)}
                                  class={[`edt-width-box edt-w-box-${lrFlag}`]}
                                  style={{
                                    left: `${eL}%`,
                                    width: `calc(${eW}% - ${miw})`
                                  }}
                                ></span>
                              </a-tooltip>
                            );
                          }
                          // ef的在航段外用圆点表示
                          if (
                            eventsList[edI].msgType === 'EFFDE' ||
                            eventsList[edI].msgType === 'EFDE' ||
                            eventsList[edI].msgType === 'EF'
                          ) {
                            eventArrO.push(
                              <a-dropdown
                                overlayStyle={{ 'z-index': '9!important' }}
                              >
                                <div slot='overlay'>
                                  <span
                                    class='fs-12 dot-event-box'
                                    style={{ 'border-color': priority.color }}
                                  >
                                    {onajiData}
                                  </span>
                                </div>
                                <span
                                  class={[
                                    'c-event-dot',
                                    'c-event-dot-out',
                                    `c-event-in-${priority.value}`
                                  ]}
                                  style={{ left: `${w1}%` }}
                                  onClick={e =>
                                    this.reportHandler(
                                      e,
                                      {
                                        event: { ...eItem },
                                        ...iterator,
                                        totalLeg: row.totalLeg
                                      },
                                      'efReportVisible',
                                      index
                                    )
                                  }
                                ></span>
                              </a-dropdown>
                            );
                          } else {
                            // 航段内为矩形
                            eventArr.push(
                              <a-dropdown
                                overlayStyle={{ 'z-index': '9!important' }}
                              >
                                <div slot='overlay'>
                                  <span
                                    class='fs-12 dot-event-box'
                                    style={{ 'border-color': priority.color }}
                                  >
                                    {onajiData}
                                  </span>
                                </div>
                                <span
                                  class={[
                                    'c-event-dot',
                                    'c-event-dot-in',
                                    `c-event-in-${priority.value}`,
                                    legEndClass
                                  ]}
                                  style={{ left: `${w1}%` }}
                                  onClick={e => {
                                    e.stopPropagation();
                                    this.rowClickHanlder(index, row);
                                  }}
                                ></span>
                              </a-dropdown>
                            );
                          }
                        }

                        if (eventArr.length === 0) {
                          eventArr.push(
                            <a-tooltip
                              overlayClassName='leg-slider-item-out-box'
                              autoAdjustOverflow={false}
                              placement='bottomLeft'
                              overlayStyle={{ 'z-index': '8!important' }}
                            >
                              {rangeClass === 'c5' ? (
                                <div slot='title'>
                                  <span
                                    class={[
                                      `fs-12 leg-event-box leg-event-box-${rangeClass}`
                                    ]}
                                  >
                                    <div>
                                      {' '}
                                      <a-icon
                                        type='info-circle'
                                        theme='filled'
                                        style={{
                                          color: '#3377ff',
                                          fontSize: '24px'
                                        }}
                                      />
                                    </div>
                                    <div class='text-c fs-16 fw-500 mb-12'>
                                      航班目的地已变更
                                    </div>
                                    <a-button
                                      type='primary'
                                      ghost
                                      onClick={() => {
                                        this.changeTheDestination(iterator);
                                      }}
                                    >
                                      知道了
                                    </a-button>
                                  </span>
                                </div>
                              ) : (
                                <div slot='title'>
                                  <span
                                    class={[
                                      `fs-12 leg-event-box leg-event-box-${rangeClass}`
                                    ]}
                                  >
                                    <div class='leg-event-box-fn'>
                                      {iterator.flightNo}
                                    </div>
                                    <a
                                      onClick={e =>
                                        this.airportInfoHandler(
                                          e,
                                          iterator.depCode3,
                                          'dep'
                                        )
                                      }
                                    >
                                      {iterator.depCode3}
                                    </a>
                                    <span class='leg-event-box-dot'>
                                      ·········
                                    </span>
                                    <a
                                      onClick={e =>
                                        this.airportInfoHandler(
                                          e,
                                          iterator.arrCode3,
                                          'arr'
                                        )
                                      }
                                    >
                                      {iterator.arrCode3}
                                    </a>
                                  </span>
                                </div>
                              )}

                              <span
                                // onClick={(e) => this.legAlerInfoHandler(e, iterator, index)}
                                class={[`edt-width-box edt-w-box-0`]}
                                style={{ left: '0%', width: '100%' }}
                              ></span>
                            </a-tooltip>
                          );
                        }

                        if (
                          !(
                            +sDate < -10 &&
                            Math.abs(eWidth) - Math.abs(sDate) < 5
                          )
                        ) {
                          obj.children.push(
                            <span
                              class={[
                                'jdt-slider',
                                `leg-silider-${rangeClass}`
                              ]}
                              style={{
                                left: `${sDate}%`,
                                width: `${eWidth}%`,
                                position: 'absolute'
                              }}
                            >
                              <span
                                style={{
                                  'min-width':
                                    eventArr.length > 0 ? '4px' : '0px'
                                }}
                                class={['jdt-oh']}
                              >
                                {eventArr}
                              </span>
                              {eventArrO}
                            </span>
                          );
                        }
                      }
                    }
                  }
                  return obj;
                }
              });
            }
          }
        }
        // 解决航段条错位
        tsdTmpAll[tsdTmpAll.length - 1].children.length === 0
          ? tsdTmpAll.pop()
          : '';

        this.tColumns = tsdTmpAll;
        // 时间竖、时间轴偏移
        this.currentDateOffsetHandler(
          verticalLineIndex,
          timeBoxWidth,
          cw,
          ocw,
          stepRange,
          si
        );
      }, 0);
    }
  }
};
</script>

<style lang="less">
@import 'index';
</style>
